<template lang="html">
  <div>

<!-- 下列表-->
  <el-row  class="bottom_content">
<!--    <el-row>-->
<!--      <el-col :span="7">-->
<!--        &lt;!&ndash;      @keyup.enter.native = 'searchTslByName'&ndash;&gt;-->
<!--        <el-input class="filter-input" v-model.trim="filterText"  size="small"  prefix-icon="el-icon-search"   placeholder="请输入内容">-->
<!--        </el-input>-->
<!--        &lt;!&ndash;      {{$t('button.SEARCH')}}&ndash;&gt;-->
<!--        &lt;!&ndash;      <el-button size="small" type="primary" @click="query" >搜索</el-button>&ndash;&gt;-->
<!--      </el-col>-->
<!--      <el-col :span="17" class="topButton">-->
<!--        <el-row class="topButton">-->
<!--          <template v-if=userInfo.admin>-->
<!--            <el-button size="small"  type="sure" @click="showAddDialog">保存</el-button>-->
<!--          </template>-->
<!--          <el-button size="small"  type="info" @click="importExcel">-->
<!--            导入Excel-->
<!--          </el-button>-->
<!--          &lt;!&ndash;         <template v-if=userInfo.admin>&ndash;&gt;-->
<!--          &lt;!&ndash;           <el-button size="small" v-show="form.tslId!=2" type="edit" @click="showAddTemplateDialog">&ndash;&gt;-->
<!--          &lt;!&ndash;             {{$t('constant.tsl.ADD_TSL_FUN')}}&ndash;&gt;-->
<!--          &lt;!&ndash;           </el-button>&ndash;&gt;-->
<!--          &lt;!&ndash;         </template>&ndash;&gt;-->
<!--        </el-row>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    左侧树 -->
    <el-col :span="5">
<!--      style="border: 1px solid #EBEEF5;height: 490px;" left-tree-->
      <el-row  class="left-panel">
        <el-input class="filter-input" v-model.trim="filterText"  size="small"  prefix-icon="el-icon-search"   placeholder="请输入内容">
        </el-input>
<!--        树-->
        <el-row class="tree-panel">
          <el-tree
            ref="setTree"
            class="byui-filter-tree"
            :data="setTree"
             node-key="id"
            :highlight-current="true"
            :check-on-click-node="true"
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="handleLeftclick"
            :props="defaultProps"
          >
                <div slot-scope="{ node, data}"  class="byui-custom-tree-node">
<!--                    <div class="custom-tree-node-wrapper">-->
<!--                        <span class="custom-tree-node-label">-->
<!--                            {{ node.label }}-->
<!--                        </span>-->
                  <div class="byui-tree-item">
                    <i class="el-icon-s-custom  byui-tree-icon"></i>
                    <!--<img class="tree-icon" src="@/assets/equipment/police_icon.jpg" />这里可以设置自定义的树图标-->
                        <span class="byui-tree-name byui-text-ellipsis"
                              :title="node.label"
                        >
                            {{ node.label }}
                        </span>
                      <span class="operate-btns">
                    <dot-dropdown :events="dropMenuEvents" :data="{node,data}" @dotEvents="dotEvents" />
                    <dot-dropdown v-if="data.type === 2" :events="sysDropMenuEvents" :data="{node,data}" @addNode="addResource" />
                  </span>
                    </div>

                </div>
          </el-tree>

        </el-row>

      </el-row>
    </el-col>

<!--    右侧列表 节点-->
    <el-col :span="19" class="right_list">
      <el-col class="topButton">
        <el-row >
<!--          <template>-->
<!--            <el-button size="small"  type="sure">保存</el-button>-->
<!--          </template>-->
          <el-button size="small"  type="sure" @click="importExcel">
            导入Excel
          </el-button>
          <!--         <template v-if=userInfo.admin>-->
          <!--           <el-button size="small" v-show="form.tslId!=2" type="edit" @click="showAddTemplateDialog">-->
          <!--             {{$t('constant.tsl.ADD_TSL_FUN')}}-->
          <!--           </el-button>-->
          <!--         </template>-->
        </el-row>
      </el-col>
<!-- 上 表单 -->
      <el-form :inline="true" :model="ruleForm" :rules="rules"  ref="ruleForm" label-width="100px"  size="medium" class="demo-form-top">
        <el-form-item label="节点类型" prop="region" >
          <el-select v-model="ruleForm.region" placeholder="活动区域">
            <el-option label="电气设备" value="shanghai"></el-option>
            <el-option label="层级节点" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="父节点" prop="parentNode">
          <el-input v-model="ruleForm.parentNode" placeholder="点击左侧树自动带入"></el-input>
        </el-form-item>
      </el-form>

   <!--标签-->
      <div class="tab-content">
<!--        tab标签-->
        <div>
             <el-tabs v-model="activeName" @tab-click="tagClick">
               <el-tab-pane label="资产信息" name="assetInformation"></el-tab-pane>
               <el-tab-pane label="技术参数" name="specification"></el-tab-pane>
               <el-tab-pane label="技术文件" name="third"></el-tab-pane>
             </el-tabs>
           </div>
     <!-- 标签对应的form 表单  资产信息  -->
        <div  v-if="activeName=='assetInformation'">
           <el-form ref="assetInform" :inline="true" :label-position="labelPosition" :model="assetInform" :rules="assetInformRules" class="demo-form-inline" label-width="80px" size="medium">
             <el-form-item label="设备大类">
               <el-select v-model="assetInform.region" placeholder="请选择设备大类">
                 <el-option label="电路器" value="shanghai"></el-option>
                 <el-option label="母排" value="beijing"></el-option>
               </el-select>
             </el-form-item>

             <el-form-item label="设备小类">
               <el-select v-model="assetInform.region" placeholder="请选择设备小类">
                 <el-option label="油浸式断路器" value="油浸式断路器"></el-option>
                 <el-option label="SF6断路器" value="SF6断路器"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="设备编码">
               <el-input v-model="assetInform.code"></el-input>
             </el-form-item>

             <el-form-item label="活动时间">
               <el-col :span="11">
                 <el-date-picker type="date" placeholder="选择日期" v-model="assetInform.date1" style="width: 100%;"></el-date-picker>
               </el-col>
               <el-col class="line" :span="2">-</el-col>
               <el-col :span="11">
                 <el-time-picker placeholder="选择时间" v-model="assetInform.date2" style="width: 100%;"></el-time-picker>
               </el-col>
             </el-form-item>
             <el-form-item label="活动形式">
               <el-input type="textarea" v-model="assetInform.desc"></el-input>
             </el-form-item>
           </el-form>
         </div>
        <!-- 标签对应的form 表单  技术参数  -->
        <div  v-if="activeName=='specification'">
          <el-form ref="skillform" :inline="true" :model="skillform" :rules="skillRules" class="demo-form-inline" label-width="80px" size="medium" >
            <el-form-item label="额定电压">
              <el-input v-model="skillform.name">KV</el-input>
            </el-form-item>
            <el-form-item label="活动区域">
              <el-select v-model="skillform.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="skillform.date1" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="skillform.date2" style="width: 100%;"></el-time-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="活动形式">
              <el-input type="textarea" v-model="skillform.desc"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- 标签对应的form 表单  技术文件  -->
        <div  v-if="activeName=='TCF'">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
    </el-col>
  </el-row>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {DataMainApi, Status} from '@/components/ApiConstant'
// import TreeRender from '@/components/nx-tree'
import api from '@/api/treeApi'
import DotDropdown from './dot-dropdown'

// import TslAddForm from './TslAdd'
// import TslTemplateAddFrom from '@/product/tslAdd'
// import TslTemplateEditFrom from '@/product/tslEdit'
// import TslTemplateJson from '@/product/tslShow'
// import TerminalBatchAdd from "@/device/TerminalBatchAdd";
// import TslBatchAdd from "@/TslBatchAdd";

export default {
  name: 'equipmentAccount',
  components: {
    DotDropdown,
    // TreeRender,
    api
    // TslBatchAdd,
    // 'add-tsl': TslAddForm,
    // 'add-tsl-template': TslTemplateAddFrom,
    // 'edit-tsl-template': TslTemplateEditFrom,
    // 'json-tsl-template': TslTemplateJson,
    // 'tsl-batch-add':TslBatchAdd
  },
  created () {
  },
  data () {
    return {
      maxexpandId: api.maxexpandId, // 新增节点开始id
      non_maxexpandId: api.maxexpandId, // 新增节点开始id(不更改)
      isLoadingTree: false, // 是否加载节点树
      setTree: api.treelist, // 节点树数据

      isShow: false,
      currentData: '',
      currentNode: '',
      menuVisible: false,
      firstLevel: false,
      lastLevel: false,
      filterText: '', // 过滤字段

      // 默认转换
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultExpandKeys: [], // 默认展开节点列表

      // 子组件 要的事件
      dropMenuEvents: [
        { label: '新建同级', funcName: 'addPeerNode' },
        { label: '新建子级', funcName: 'addNode' },
        // { label: '分配操作', funcName: 'distributeAction' },
        { label: '编辑', funcName: 'editNode' },
        { label: '删除', funcName: 'removeNode' }
      ],

      form: {
        tslId: null,
        pageNum: 1,
        pageSize: 10
      },

      keyword: null,
      tmpResolve: null,
      tmpNode: null,
      currentTsl: {
        tslId: null
      },
      //   上列 form 表单
      ruleForm: {
        name: '',
        region: '',
        parentNode: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },

      labelPosition: 'right',
      //  资产信息 form 表单
      assetInform: {
        name: '',
        region: '',
        parentNode: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      assetInformRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },

      // 技术参数
      skillform: {
        name: '',
        region: '',
        parentNode: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      skillRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },

      // 技术文件

      //   tag 标签标志
      //   默认资产信息
      activeName: 'assetInformation',

      // 文件上传
      imageUrl: '',
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]

    }
  },

  mounted () {
    console.log(api)
    this.initExpand()
  },

  methods: {

    // 导入importExcel
    importExcel () {},

    // 树上面的 方法
    initExpand () {
      this.setTree.map((a) => {
        this.defaultExpandKeys.push(a.id)
      })
      this.isLoadingTree = true
    },
    handleNodeClick (d, n, s) { // 点击节点
      // console.log(d,n)
      d.isEdit = false// 放弃编辑状态
    },
    handleAddTop () {
      this.setTree.push({
        id: ++this.maxexpandId,
        name: '新增节点',
        pid: '',
        isEdit: false,
        children: []
      })
    },

    // 点击 树形节点方法
    handleLeftclick (data, node) {
      debugger
      this.currentData = data
      this.currentNode = node
      if (node.level !== 1) {
        // 如果是根节点则不显示新增同级
        this.firstLevel = true
      } else {
        this.firstLevel = false
      }
      if (node.level !== 3) {
        // 如果是最后一级则不显示新增下级
        this.lastLevel = true
      } else {
        this.lastLevel = false
      }
    },
    // 新增同级
    addPeerNode ({ node, data }) {
      debugger
      console.log(node + 'node节点；' + data + 'data')

      let treeD = {
        id: ++this.maxexpandId,
        name: '新增节点',
        pid: data.pid,
        isEdit: false,
        children: []
      }
      this.$refs.setTree.append(treeD, node.parent)
    },
    // 新增子级
    addNode ({ node, data }) {
      debugger
      console.log(node + 'node节点；' + data + 'data')
      let treeD = {
        id: ++this.maxexpandId,
        name: '新增节点',
        pid: data.pid,
        isEdit: false,
        children: []
      }
      this.$refs.setTree.append(treeD, node)
    },

    // 编辑节点
    editNode ({ node, data }) {
      // if (data.isEdit) {
      this.$prompt('请输入节点名称', '提示', {
        confirmButtonText: '确定',
        inputValue: node.data.label,
        cancelButtonText: '取消'
      }).then(({value}) => {
        debugger
        this.$set(data, 'name', value)
      })
      // }
    },

    // 删除
    removeNode ({ node, data }) {
      let reNode = node
      debugger
      console.log(node + 'node节点；' + data + 'data')
      this.$confirm(
        `确定删除${reNode.label} 节点, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.$refs.setTree.remove(reNode)
      }).catch(() => {})
    },

    // 打开 点击的 事件。 通过item.funcName 去判断走哪个事件
    dotEvents ({ node, data }, item) {
      debugger
      //
      console.log(node + 'node节点；' + data + 'data')
      // 新增同级
      if (item.funcName === 'addPeerNode') {
        this.addPeerNode({ node, data })
      }
      // 新增子级
      if (item.funcName === 'addNode') {
        this.addNode({ node, data })
      }
      // 删除
      if (item.funcName === 'removeNode') {
        this.removeNode({ node, data })
      }
      // 编辑
      if (item.funcName === 'editNode') {
        this.editNode({ node, data })
      }
    },
    // 节点 过滤操作 ;  default-expand-all 必须全部展开 才可以 过滤
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    handleAdd (s, d, n) { // 增加节点
      console.log(s, d, n)
      if (n.level >= 6) {
        this.$message.error('最多只支持五级！')
        return false
      }
      // 添加数据
      d.children.push({
        id: ++this.maxexpandId,
        name: '新增节点',
        pid: d.id,
        isEdit: false,
        children: []
      })
      // 展开节点
      if (!n.expanded) {
        n.expanded = true
      }
    },
    handleEdit (s, d, n) { // 编辑节点
      console.log(s, d, n)
    },
    handleDelete (s, d, n) { // 删除节点
      console.log(s, d, n)
      const that = this
      // 有子级不删除
      if (d.children && d.children.length !== 0) {
        this.$message.error('此节点有子级，不可删除！')
        return false
      } else {
        // 新增节点直接删除，否则要询问是否删除
        const delNode = () => {
          const list = n.parent.data.children || n.parent.data // 节点同级数据
          let _index = 99999// 要删除的index
          /* if(!n.parent.data.children){//删除顶级节点，无children
                list = n.parent.data
              } */
          list.map((c, i) => {
            if (d.id === c.id) {
              _index = i
            }
          })
          const k = list.splice(_index, 1)
          console.log(_index, k)
          this.$message.success('删除成功！')
        }
        const isDel = () => {
          that.$confirm('是否删除此节点？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delNode()
          }).catch(() => {
            return false
          })
        }
        // 判断是否新增
        d.id > this.non_maxexpandId ? delNode() : isDel()
      }
    },

    loadTree () {
      this.searchTslByName()
      // this.loadTslTreeSubModule(this.tmpNode, this.tmpResolve)
    },
    // 物模型树搜索
    searchTslByName () {
      var self = this
      self.tslTreeData = []
      var keyword = self.keyword
      if (keyword == null || keyword === '') {
        self.tslTreeData = [{name: '全部数据', id: 2}]
      } else {
        this.$http.get(`${DataMainApi}/tsl/list/`, {
          params: {
            type: 1,
            keyword: keyword
          }
        }).then(res => {
          if (res.data.code === Status.success) {
            setTimeout(function () {
              self.tslTreeLoading = false
            }, 500)
            res.data.data.map(e => (
              self.tslTreeData.push(
                {
                  id: e.id,
                  name: e.name,
                  leaf: true
                }
              )
            ))
          } else {
            self.$notify.error(self.$t('constant.tsl.LOAD_TSL_TREE_FAILED_NOTIFY'))
          }
        })
      }
    },
    //  TAG切换事件
    tagClick () {

    },

    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },

  watch: {
    filterText (val) {
      this.$refs.setTree.filter(val)
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  }
}
</script>
<style lang="scss" scoped>

  .left-panel {
    width: 20rem;
    /*height: 57.63rem;*/
    height: 100%;
    /*border: 1px solid #efefef;*/
    overflow: auto;  // 显示 滚动条
    background: #FFFFFF;
    .tree-panel {
      top: 16px;
      /*width: 20rem;*/
      /*height: 57.63rem;*/
      /*!*border: 1px solid #efefef;*!*/
      /*overflow: auto;*/
      /*background: #FFFFFF;*/
      /* 树形组件开始 */
      .byui-filter-tree {
        min-width: 100%;
        display: inline-block;
        margin-top: 0;
        margin-bottom: 20px;
      }

      .byui-custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding-left: 5px;
        padding-right: 8px;
        .byui-tree-icon {
          margin-right: 4px;
          vertical-align: middle;
        }
      }

      .byui-tree-name {
        display: inline-block;
        max-width: 150px;
        vertical-align: middle;
      }

      .byui-tree-options {
        visibility: hidden;

        .byui-tree-btn {
          color: #666;
          margin-right: 5px;

          &:hover {
            color: #666;
          }
        }
      }

      .el-tree-node {
        &__content:hover {
          .byui-tree-options {
            visibility: inherit;
          }

          .byui-tree-item {
            color: #666;
            margin-right: 8px;
          }
        }
      }

      .is-current {
        > .el-tree-node {
          &__content {
            .byui-tree-item {
              color: #666;
            }
          }
        }
      }

      /* 树形组件结束 */
    }
  }

  /*字体超出显示 ... */
  .byui-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3);
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(144, 147, 153, 0.5);
  }

  /*IE滚动条颜色*/
  html {
    scrollbar-face-color: #999; /*滚动条颜色*/
    scrollbar-highlight-color: #000;
    scrollbar-3dlight-color: #000;
    scrollbar-darkshadow-color: #000;
    scrollbar-shadow-color: #999; /*滑块边色*/
    scrollbar-arrow-color: rgba(0, 0, 0, 0.4); /*箭头颜色*/
    scrollbar-track-color: #eeeeee; /*背景颜色*/
  }
/*去掉输入框上、左右边框和圆角，并两侧留出10px边距*/
  .el-input__inner,.el-input-group__prepend{
    width: calc(100% - 20px);
    margin:0 10px;
    height: 40px;
    border-top:none;
    border-width: 0 0 1px;
    border-radius:0;
  }

/*此时点击输入框，只有下边变蓝色，希望图标的样式也随之更改。*/
/*只有input被触发了focus事件，icon感知不到，:focus伪类不满足需求了。我们可以使用:focus-within伪类，加在icon和input共同的父类上。*/

.el-input:focus-within{
  .el-icon-search:before {
    /*color: #3c6eff;*/
    font-weight: bold;
  }
}

.filter-input /deep/ {
    width: 18rem;
    left:1.06rem;
    top:0.63rem;
  /*调整搜索图标大小、颜色和粗细，并稍微调整位置*/
  .el-input__prefix{
    .el-input__icon{
      /*margin-top: 8px;*/
      display: inline-block;
    }
    font-size:16px;
  }

  }
  .topButton {
    text-align: right;
    padding:1.1rem 0.69rem 2.5rem ;
  }

/*  列表内容*/
  .tab-content{
    padding-left: 24px;
  }
/*  下列 布局*/
  .bottom_content {
    height: 80%;
  }

  /*树的也是。。。*/
  .el-tree-node__content {
    position: relative;
    .operate-btns {
      position: absolute;

      right: 2px;
      margin-top: -5px;
      display: none;

    }
    // 鼠标悬停时，展示
    &:hover,
    :focus-within {
      .operate-btns {
        display: inline;

      }

    }

  }
    /*右侧*/
    .right_list{
      border: 1px solid #EBEEF5;
      padding-left: 1.56rem;
      height: 57.63rem;

      background: #FFFFFF;
      box-shadow: 0rem 0rem 1rem rgba(214, 214, 214, 0.1);
      opacity: 1;
      border-radius: 0rem;
    }

  /* 查询条件的form  */

  .demo-form-top {
    padding-bottom: 2.31rem;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
